<template>
  <div>

    <div class="nav-bar2 ww1">
      <div class="bar2-cont" fz-14 auto flex flex-c flex-b>
        <div class="route-link">
          <router-link
            to="/account/info"
            custom
            v-slot="{ href, route, navigate, isActive, isExactActive }"
          >
            <span :active="isActive" :href="href" @click="navigate"
              >后台中心</span
            >
          </router-link>

          <router-link
            to="/account/feedback"
            custom
            v-slot="{ href, route, navigate, isActive, isExactActive }"
          >
            <span :active="isActive" :href="href" @click="navigate"
              >反馈消息</span
            >
          </router-link>

          <router-link
            to="/account/buy"
            custom
            v-slot="{ href, route, navigate, isActive, isExactActive }"
          >
            <span :active="isActive" :href="href" @click="navigate"
              >购买记录</span
            >
          </router-link>

          <router-link
            to="/account/expenseDetail"
            custom
            v-slot="{ href, route, navigate, isActive, isExactActive }"
          >
            <span :active="isActive" :href="href" @click="navigate"
              >收支明细</span
            >
          </router-link>

          <!-- 去掉此项 -->
          <!-- <router-link
            to="/account/viewRecord"
            custom
            v-slot="{ href, route, navigate, isActive, isExactActive }"
          >
            <span :active="isActive" :href="href" @click="navigate"
              >浏览记录</span
            >
          </router-link> -->

          <router-link
            to="/account/collection"
            custom
            v-slot="{ href, route, navigate, isActive, isExactActive }"
          >
            <span :active="isActive" :href="href" @click="navigate"
              >收藏夹</span
            >
          </router-link>

          <router-link
            to="/account/orderInvoice"
            custom
            v-slot="{ href, route, navigate, isActive, isExactActive }"
          >
            <span :active="isActive" :href="href" @click="navigate"
              >订单和发票</span
            >
            <el-divider direction="vertical"></el-divider>
          </router-link>

          <router-link
            to="/account/sale"
            custom
            v-slot="{ href, route, navigate, isActive, isExactActive }"
          >
            <span :active="isActive" :href="href" @click="navigate"
              >销售记录</span
            >
          </router-link>

          <router-link
            to="/account/cash"
            custom
            v-slot="{ href, route, navigate, isActive, isExactActive }"
          >
            <span :active="isActive" :href="href" @click="navigate">提现</span>
          </router-link>

          <router-link
            to="/account/upload"
            custom
            v-slot="{ href, route, navigate, isActive, isExactActive }"
          >
            <span :active="isActive" :href="href" @click="navigate">上传</span>
          </router-link>

          <router-link
            to="/account/search"
            custom
            v-slot="{ href, route, navigate, isActive, isExactActive }"
          >
            <span :active="isActive" :href="href" @click="navigate"
              >搜索动态</span
            >
          </router-link>

          <router-link
            to="/account/manage"
            custom
            v-slot="{ href, route, navigate, isActive, isExactActive }"
          >
            <span :active="isActive" :href="href" @click="navigate">
              作品管理</span
            >
          </router-link>
        </div>

        <!-- <a class="login-out" href=""> 退出登录 </a> -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "AppHeader",
  data() {
    return {
      keyword: '',
      url: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_360_360%2F6a%2F51%2F24%2F6a512471795e0824472d6c85cf22bdb2.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638627584&t=e1b7bf0b3bc1315b72f5a3421077d905",
      nav: [
        {
          title: "实拍视频",
          url: "",
        },

        {
          title: "AE模板",
          url: "",
        },
      ],
      tag: 0, //默认nav
      ele: "", //默认的第一个a元素
      style: {
        left: 0,
        width: 0,
      }, //修改下划线位置

      //搜索框
      select: "",
      input3: "",
      tagStyle: {},
      tagArr: ["3D模型", "文艺体娱"],
      tagText: "3D模型",

      nav2: [
        [
          {
            title: "商业城市",
            url: "",
          },
          {
            title: "风景建筑",
            url: "",
          },
          {
            title: "工业农业",
            url: "",
          },
        ],
        [
          {
            title: "震撼大气",
            url: "",
          },
          {
            title: "时尚动感",
            url: "",
          },
          {
            title: "婚庆浪漫",
            url: "",
          },
        ],
      ],
    };
  },

  mounted() {
    this.$nextTick(() => {
      //初始化导航下划线位置

      this.mouseNav(0);
    });
  },

  methods: {
    // 首页跳转
    goIndex() {
      this.$router.push('/videoCenter/videoList')
    },
    // 头像框下拉菜单
    handleDropmenu(value) {
      if(value == 'videoCenter') {
        this.$router.push('/account/info')
      }
    },
    // 头部右侧跳转
    rightJump(type){
      if(type == 'recharge') {
        this.$router.push('/account/recharge')
      }else if(type == 'upload') {
        this.$router.push('/account/upload')
      } else if (type == 'collection') {
        this.$router.push('/account/collection')
      } else if (type == 'money') {
        this.$router.push('/account/expenseDetail')
      }
    },
    // 搜索事件
    goSearch() {
      if(!this.keyword) {
        this.$message('请输入搜索的内容')
      }
      this.$router.push({
        path: `/account/searchList/${this.keyword}`
      })
    },
    //鼠标经过
    mouseNav(index) {
      //offsetWidth
      this.tag = index;
      this.ele = this.$refs[`a-${index}`];

      if(!this.ele) return;
      const { offsetWidth, offsetLeft } = this.ele[0];
      this.style = {
        width: `${offsetWidth}px`,
        left: `${offsetLeft}px`,
      };
    },

    showTag() {
      this.tagStyle = {
        display: "block",
        transform: "translateY(0)",
      };
    },
    hideTag(item) {
      this.tagText = item;
      this.tagStyle = {
        display: "none",
      };
    },
  },
};
</script>

<style scoped>
.nav-senod-content a:hover,
.nav-content a:hover,
.nav-content a.ative,
[active],
.bar2-cont span:hover {
  color: var(--nav-hover);
}

.nav-wap {
  position: relative;
  z-index: 3;
  height: 60px;
  line-height: 60px;
}
.nav-content,
.nav-senod-content {
  width: 95%;
}
.nav-content a {
  color: var(--nav-color);
}
.nav-left .pos-b {
  height: 2px;
  width: auto;
  background: #fff;
  top: 95%;
  left: 0;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
}
.left-cont img {
  vertical-align: middle;
  width: 71px;
  height: auto;
}
.left-cont a {
  margin: 0 12px;
  font-size: var(--title);
  font-size: 20px;
}

.right-cont {
  font-size: var(--content);
  overflow: hidden;
}

.right-cont span {
  margin-left: 22px;
  cursor: pointer;
  color: var(--nav-color);
}
.right-cont dt {
  width: 32%;
  overflow: hidden;
}
.right-cont .ava-img {
  width: 20px;
  height: 20px;
}
.right-cont .ava-img img {
  object-fit: cover;
  height: 100%;
  vertical-align: sub;
}
.head-search {
  border: 1px solid #6f6f6f;
  background: #f5f5f5;
  border-right: none;
  height: 38px;
  line-height: 38px;
  flex: 1;
  margin-right: 12px;
}
.head-search input {
  border: none;
  outline: none;
  background: none;
  flex: 1;
  color: var(--nav-color);
  text-indent: 2%;
}
.tag-box dt {
  margin-right: 20px;
}
.tag-box dd {
  background: var(--search-btn-color);
  padding: 0 12px;
  border: 1px solid var(--search-btn-color);
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}
.tag-wap {
  color: var(--color-black);
  font-size: var(--chilid-nav-bg);
  padding: 0 10px;
  text-transform: uppercase;
}
.tag-list {
  background: #fff;
  padding: 0px 20px;
  left: 0;
  top: 100%;
  width: 100%;
  min-height: 58px;
  display: none;
  -webkit-box-shadow: 0 1px 4px 0 rgb(0 0 0 / 30%);
  box-shadow: 0 1px 4px 0 rgb(0 0 0 / 30%);
}
.tag-list li {
  margin: 8px 0;
  height: 20px;
  line-height: 20px;
  cursor: pointer;
  text-transform: uppercase;
}
.tag-list li:hover {
  color: var(--nav-hover-red);
}

.shop-num {
  background: red;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  line-height: 20px;
  text-align: center;
  font-size: 11px;
  color: #fff;
  left: 15px;
  top: 8px;
}
.shop-num.no-num {
  background: var(--grey);
}

.login-out {
  font-size: var(--title-small);
  color: var(--nav-color);
}

.list-head.nav-wap {
  background: var(--head-bg);
}
.nav-wap .head-search {
  /* margin: 0 auto;
  max-width: 400px;
  margin-right: 38px;
  border-radius: 6px;
  padding-left: 14px; */
  margin: 0 60px;
}

.list-nav-senod.list-nav-senod {
  background: var(--list-nav-bg);
}
.nav-senod {
  background: var(--nav-bg);
  height: 38px;
  line-height: 38px;
  color: var(--nav-color);
  z-index: 2;
}

.nav-senod-content .left {
  display: none;
}
.nav-senod-content .left.nav-senod-show {
  display: block;
}

.nav-senod-content,
.scroll-list {
  overflow: hidden;
}
.nav-senod a {
  color: var(--nav-color);
  margin-right: 12px;
  font-size: var(--title-small);
}
.nav-senod .right {
  overflow: hidden;
  text-align: right;
  font-size: 13px;
  height: 38px;
}
.info-arrow >>> .popper__arrow {
  display: none;
}

@media screen and (max-width: 900px) {
  .el-dropdown-menu__item {
    width: 140px;
  }
}
@media screen and (max-width: 1300px) {
  .bar-l a {
    font-size: 14px;
  }
}

@media screen and (max-width: 1660px) {
  .search-wap {
    width: 30%;
    flex: 1 1 30%;
  }
}

@media screen and (max-width: 1400px) {
  .search >>> .el-input {
    width: 70%;
  }
  .search-tag {
    width: 30%;
  }
}
.bar2-cont span {
  cursor: pointer;
  margin-right: 2%;
  font-size: var(--title-small);
}
</style>
